<template>
  <div class="warp">
      
    <div class="contract-info" id="contractInfo">
        <div style="height: 1380px">
            <flexbox justify="center">
                <h1 style="padding: 5px 0;">
                    销售合同
                </h1>
            </flexbox>
            <flexbox direction="column">
                <flexbox direction="column" justify="flex-start" style="padding: 160px 0">
                    <flexbox style="padding: 10px 0;font-weight: bold" class="target-node-item">
                        <label >甲方：</label><span>{{contractInfo.entity | filterData('check','customerName')}}</span>
                    </flexbox>
                    <flexbox style="padding: 10px 0;font-weight: bold" class="target-node-item">
                        <label >合同编号：</label><span></span>
                    </flexbox>
                </flexbox>

                <flexbox direction="column" justify="flex-start" style="padding: 160px 0">
                    <flexbox style="padding: 10px 0;font-weight: bold" class="target-node-item">
                        <label >乙方：</label><span>{{contractInfo.contractInfo | filterData('check','partBCompanyName')}}</span>
                    </flexbox>
                    <flexbox style="padding: 10px 0;font-weight: bold" class="target-node-item">
                        <label >合同编号：</label><span>{{contractInfo.entity | filterData('check','num')}}</span>
                    </flexbox>
                </flexbox>

                <flexbox direction="column" justify="flex-start" style="padding: 160px 0">
                    <flexbox class="item-box target-node-item" >
                        <label >签约地点：</label><span>{{contractInfo.entity | filterData('check','signLocation')}}</span>
                    </flexbox>
                    <flexbox class="item-box target-node-item">
                        <label >签约时间：</label><span>{{contractInfo.entity | filterData('orderDate','orderDate')}}</span>
                    </flexbox>
                </flexbox>
            </flexbox>
        </div>

        <div >
            <flexbox direction="column" style="padding-top: 20px">
                <flexbox style="padding: 10px 0;font-weight: bold" class="target-node-item">
                    <label>甲方信息</label>
                </flexbox>
                <flexbox class="item-box target-node-item">
                    <label >公司名称：</label><span>{{contractInfo.contractInfo | filterData('check','partACompanyName')}}</span>
                </flexbox>
                <flexbox class="item-box target-node-item">
                    <label >通讯地址：</label><span>{{contractInfo.contractInfo | filterData('check','partACompanyAddress')}}</span>
                </flexbox>
                <flexbox class="item-box target-node-item">
                    <flexbox style="width: 48%">
                        <label >联系人：</label><span>{{contractInfo.contractInfo | filterData('check','partACompanyContactName')}}</span>
                    </flexbox>
                    <flexbox style="width: 48%">
                        <label >电话：</label><span>{{contractInfo.contractInfo | filterData('check','partACompanyPhone')}}</span>
                    </flexbox>
                </flexbox>
                <flexbox class="item-box target-node-item">
                    <flexbox style="width: 48%">
                        <label >传真：</label><span>{{contractInfo.contractInfo | filterData('check','partACompanyFax')}}</span>
                    </flexbox>
                    <flexbox style="width: 48%">
                        <label >邮箱：</label><span>{{contractInfo.contractInfo | filterData('check','partACompanyEmail')}}</span>
                    </flexbox>
                </flexbox>
            </flexbox>
        </div>

        <div >
            <flexbox direction="column" style="padding-top: 20px">
                <flexbox style="padding: 10px 0;font-weight: bold" class="target-node-item">
                    <label>乙方信息</label>
                </flexbox>
                <flexbox class="item-box target-node-item">
                    <label >公司名称：</label><span>{{contractInfo.contractInfo | filterData('check','partBCompanyName')}}</span>
                </flexbox>
                <flexbox class="item-box target-node-item">
                    <label >通讯地址：</label><span>{{contractInfo.contractInfo | filterData('check','partBCompanyAddress')}}</span>
                </flexbox>
                <flexbox class="item-box target-node-item">
                    <flexbox style="width: 48%">
                        <label >联系人：</label><span>{{contractInfo.contractInfo | filterData('check','partBCompanyContactName')}}</span>
                    </flexbox>
                    <flexbox style="width: 48%">
                        <label >电话：</label><span>{{contractInfo.contractInfo | filterData('check','partBCompanyPhone')}}</span>
                    </flexbox>
                </flexbox>
                <flexbox class="item-box target-node-item">
                    <flexbox style="width: 48%">
                        <label >传真：</label><span>{{contractInfo.contractInfo | filterData('check','partBCompanyFax')}}</span>
                    </flexbox>
                    <flexbox style="width: 48%">
                        <label >邮箱：</label><span>{{contractInfo.contractInfo | filterData('check','partBCompanyEmail')}}</span>
                    </flexbox>
                </flexbox>
            </flexbox>
        </div>
        <div >
            <flexbox direction="column" style="padding-top: 20px" class="target-node-item">
                <p >根据《中华人民共和国合同法》的规定，甲方与乙方本着平等、自愿、诚信、互惠互利的原则，经充分协商，订立如下合同，双方共同遵守。</p> 
            </flexbox>
        </div>

        <div >
            <flexbox direction="column" style="padding-top: 20px"  class="target-node-item">
                <flexbox style="padding: 10px 0;font-weight: 600">
                    <div style="position: relative">
                        <span class="serial-number">1.</span><span class="small-title">合同标的</span>
                    </div>
                </flexbox>
                <flexbox style="padding: 0 0 0px 36px;">
                    <flexbox direction="column" style="align-content: flex-start">
                        <span style="width: 100%;padding-bottom: 10px" >乙方按照如下清单，向甲方提供相应的产品和服务。</span>
                        <table border="1" width="100%" class="table-info">
                            <thead >
                                <th width="50">序号</th>
                                <th >名称</th>
                                <th >型号</th>
                                <th width="80">数量</th>
                                <th >总价</th>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td style="text-align: left">{{contractInfo.entity | filterData('check','subjectName')}}</td>
                                    <td style="text-align: left">{{contractInfo.entity | filterData('check','subjectModel')}}</td>
                                    <td>1</td>
                                    <td style="text-align: right">{{contractInfo.entity | filterData('check','money')}} 元</td>
                                </tr>
                                <tr style="text-align: left;">
                                    <td colspan="5">金额合计：{{contractInfo.entity | filterData('check','money')}} 元</td>
                                </tr>
                                <tr style="text-align: left;">
                                    <td colspan="5">发票税率：{{contractInfo.entity | filterData('check','rate')}} %</td>
                                </tr>
                                <tr style="text-align: left;">
                                    <td colspan="5">金额大写：人民币  {{contractInfo.entity | filterData('capitalAmount','money')}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </flexbox>
                </flexbox>
            </flexbox>
        </div>

        <div >
            <flexbox direction="column" style="padding-top: 20px">
                <flexbox style="padding: 10px 0;font-weight: 600" class="target-node-item">
                    <div style="position: relative">
                        <span class="serial-number">2.</span><span class="small-title">合同附件</span>
                    </div>
                </flexbox>
                <flexbox style="padding: 0 0 0px 36px;">
                    <flexbox direction="column" style="align-content: flex-start">
                        <span style="width: 100%;padding-bottom: 10px" class="target-node-item">本合同包含以下附件，与本合同具有同等法律效力。</span>
                        <flexbox style="position: relative;padding-top: 10px" class="target-node-item">
                            <span class="black-circle" ></span><span class="small-title" style="min-width: 300px">乙方供货清单</span>
                        </flexbox>
                        <flexbox style="position: relative;padding-top: 10px" class="target-node-item"
                            v-for="(file,index) in contractInfo.annexList"
                            :key="index">
                            <span class="black-circle" ></span><span class="small-title" style="min-width: 300px">{{file.annexName}}</span> 
                            <span class="download-button" v-if="false" @click="downContractFile(file)">下载</span>
                        </flexbox>
                    </flexbox>
                </flexbox>
            </flexbox>
        </div>

        <div >
            <flexbox direction="column" style="padding-top: 20px">
                <flexbox style="padding: 10px 0;font-weight: 600" class="target-node-item">
                    <div style="position: relative">
                        <span class="serial-number">3.</span><span class="small-title">付款方式</span>
                    </div>
                </flexbox>
                
                <flexbox direction="column" style="padding-top: 10px;">
                    <flexbox style="padding-bottom: 10px; position: relative" class="target-node-item">
                        <span class="serial-number">3.1.</span><span class="mini-title">付款节点及金额</span>
                    </flexbox>
                    <flexbox direction="column" style="padding: 0 0 0px 48px; ">
                        <flexbox direction="column" style="align-content: flex-start">
                            <flexbox style="position: relative;padding: 10px 0" class="target-node-item"
                                v-for="(payment,index) in contractInfo.paymentList"
                                :key="index">
                                <span class="black-circle" ></span>
                                <flexbox class="small-title" wrap="wrap">
                                    <span v-if="contractInfo.paymentList.length > 1">{{payment.payName ? payment.payName : ''}}：</span>
                                    <span>【 {{payment.paymentCondition}} 】后</span> 
                                    <span>【 {{payment.paymentCycle}} 】个工作日，</span> 
                                    <span>支付金额的【 {{payment.paymentPercentage}} %】，金额：</span>
                                    <span>{{'【 ￥'+ payment.paymentAmount + '】'}}元，</span>
                                    <span>金额大写：人民币【 {{payment | filterData('capitalAmount','paymentAmount')}} 】；</span>
                                </flexbox>
                            </flexbox>
                        </flexbox>
                    </flexbox>
                </flexbox>

                <flexbox direction="column" style="padding-top: 10px;">
                    <flexbox style="padding-bottom: 10px; position: relative" class="target-node-item">
                        <span class="serial-number">3.2.</span><span class="mini-title">开票节点及金额</span>
                    </flexbox>
                    <flexbox direction="column" style="padding: 0 0 0px 48px; ">
                        <flexbox direction="column" style="align-content: flex-start">
                            <flexbox style="position: relative;padding: 10px 0" class="target-node-item"
                                v-for="(invoice,index) in contractInfo.invoiceList"
                                :key="index">
                                <span class="black-circle" ></span>
                                <flexbox class="small-title" wrap="wrap">
                                    <span v-if="contractInfo.invoiceList.length > 1">第{{invoice.invoiceNodeNumber}}笔：</span>
                                    <span>【 {{invoice.paymentNodeNumber}} 】完成</span> 
                                    <span>【 {{invoice | filterData('option','invoiceCycle')}} 】，</span> 
                                    <span>开具【 {{invoice.invoicePercentage}} %】增值税专用发票，开票金额：</span>
                                    <span>【 ￥{{invoice.invoiceAmount}} 】元，</span>
                                    <span>金额大写：人民币【 {{invoice | filterData('capitalAmount','invoiceAmount')}} 】；</span>
                                </flexbox>
                            </flexbox>
                        </flexbox>
                    </flexbox>
                </flexbox>

                <flexbox direction="column" style="padding-top: 10px;">
                    <flexbox style="padding-bottom: 10px; position: relative" class="target-node-item">
                        <span class="serial-number">3.3.</span><span class="mini-title">甲方可用现金/支票/电汇等方式支付货款。乙方收款账号信息如下：</span>
                    </flexbox>
                    <flexbox direction="column" style="padding: 0 0 0px 48px; ">
                        <flexbox class="item-box target-node-item">
                            <label >公司名称：</label><span>{{contractInfo.contractInfo | filterData('check','partBCompanyName')}}</span>
                        </flexbox>
                        <flexbox class="item-box target-node-item">
                            <label >开户银行：</label><span>{{contractInfo.entity | filterData('check','companyBankName')}}</span>
                        </flexbox>
                        <flexbox class="item-box target-node-item">
                            <label >银行帐号：</label><span>{{contractInfo.entity | filterData('check','companyBankAccount')}}</span>
                        </flexbox>
                    </flexbox>
                </flexbox>

                <flexbox direction="column" style="padding-top: 10px;">
                    <flexbox style="padding-bottom: 10px; position: relative" class="target-node-item">
                        <span class="serial-number">3.4.</span><span class="mini-title">甲方的开票信息如下：</span>
                    </flexbox>
                    <flexbox direction="column" style="padding: 0 0 0px 48px; ">
                        <flexbox class="item-box target-node-item">
                            <label >公司名称：</label><span>{{contractInfo.partInvoice | filterData('check','partCompanyName')}}</span>
                        </flexbox>
                        <flexbox class="item-box target-node-item">
                            <label >公司税号：</label><span>{{contractInfo.partInvoice | filterData('check','partCompanyTaxNumber')}}</span>
                        </flexbox>
                        <flexbox class="item-box target-node-item">
                            <label >注册地址：</label><span>{{contractInfo.partInvoice | filterData('check','partCompanyAddress')}}</span>
                        </flexbox>
                        <flexbox class="item-box target-node-item">
                            <label >开户银行：</label><span>{{contractInfo.partInvoice | filterData('check','partCompanyBank')}}</span>
                        </flexbox>
                        <flexbox class="item-box target-node-item">
                            <label >银行账户：</label><span>{{contractInfo.partInvoice | filterData('check','partCompanyBankAccount')}}</span>
                        </flexbox>
                        <flexbox class="item-box target-node-item">
                            <label >电话号码：</label><span>{{contractInfo.partInvoice | filterData('check','partCompanyPhone')}}</span>
                        </flexbox>
                    </flexbox>
                </flexbox>
            </flexbox>
        </div>

        <div >
            <flexbox direction="column" style="padding-top: 20px">
                <flexbox style="padding: 10px 0;font-weight: 600" class="target-node-item">
                    <div style="position: relative">
                        <span class="serial-number">4.</span><span class="small-title">产品交付与验收</span>
                    </div>
                </flexbox>
                <flexbox direction="column" style="padding-top: 10px;">
                    <flexbox style="padding-bottom: 10px; position: relative" class="target-node-item">
                        <span class="serial-number">4.1.</span><span class="mini-title">硬件产品的交付与验收</span>
                    </flexbox>
                    <flexbox direction="column" style="padding-top: 10px">
                        <flexbox style="padding-bottom: 10px; position: relative" class="target-node-item">
                            <span class="serial-number">4.1.1.</span>
                            <span class="small-mini-title">
                                乙方收到<span>【{{contractInfo.contractInfo | filterData('check','hardwareDeliveryConditions')}}】</span>的款项后，
                                在<span>【{{contractInfo.contractInfo | filterData('check','hardwareDeliveryCycle')}}】</span>个工作日内安排发货。乙方将硬件产品发货到甲方指定地址；
                                运费由<span>【{{contractInfo.contractInfo | filterData('check','hardwareFreightBearer')}}】</span>承担。
                            </span>
                        </flexbox>
                        <flexbox style="padding-bottom: 10px; position: relative" class="target-node-item">
                            <span class="serial-number">4.1.2.</span>
                            <span class="small-mini-title">
                                乙方将硬件产品送达甲方指定收货人员后交付完成；若甲方无指定人员接收，乙方送达指定地点后视为交付完成。
                            </span>
                        </flexbox>
                        <flexbox style="padding-bottom: 10px; position: relative" class="target-node-item">
                            <span class="serial-number">4.1.3.</span>
                            <span class="small-mini-title">
                                甲方收到硬件产品【{{contractInfo.contractInfo | filterData('check','hardwareReceivingCycle')}}】个工作日内，应仔细清点、查验。如有异议，
                                请以书面方式立即通知乙方，并对硬件产品进行妥善保管，
                                乙方在收到书面通知后【{{contractInfo.contractInfo | filterData('check','hardwareWrittenNotificationPeriod')}}】个工作日予以更换。若双方对异议存在争议，
                                则应请双方均认可的权威机构进行检测，费用由责任方承担。超过【{{contractInfo.contractInfo | filterData('check','hardwareConfirmationLeadTime')}}】个工作日甲方未提出异议，视为甲方认可产品交付。
                            </span>
                        </flexbox>
                    </flexbox>
                </flexbox>

                <flexbox direction="column" style="padding-top: 10px;">
                    <flexbox style="padding-bottom: 10px; position: relative" class="target-node-item">
                        <span class="serial-number">4.2.</span><span class="mini-title">软件及服务产品的实施交付与验收</span>
                    </flexbox>
                    <flexbox direction="column" style="padding-top: 10px">
                        <flexbox style="padding-bottom: 10px; position: relative" class="target-node-item">
                            <span class="serial-number">4.2.1.</span>
                            <span class="small-mini-title"> 部署方式 </span>
                        </flexbox>
                        <flexbox style="padding: 0 0 0px 60px; " direction="column" v-if="contractInfo.contractInfo && contractInfo.contractInfo.itemOption == 1">
                            <flexbox style="padding-top: 10px; position: relative" class="target-node-item">
                                <span class="black-circle"></span>
                                <span class="small-title"> 语祯云部署 </span>
                            </flexbox>
                            <flexbox style="padding-top: 10px;" direction="column" class="small-title">
                                <span style="padding-bottom: 10px;" class="target-node-item">
                                    由乙方提供所需要的云服务器、云存储、服务器运维、数据安全和数据备份服务，服务期内，
                                    乙方不再单独收取费用；甲方对本账号下的数据具有完全的数据源控制权限。
                                </span>
                                <span style="padding-bottom: 10px;" class="target-node-item">
                                    乙方每次产品迭代升级后，会自动为甲方升级到最新版本，并提供相应的升级培训服务。
                                    服务期内，乙方不再收取升级和培训费用。
                                </span>
                            </flexbox>
                        </flexbox>
                        <flexbox style="padding: 0 0 0px 60px; " direction="column" v-if="contractInfo.contractInfo && contractInfo.contractInfo.itemOption == 2">
                            <flexbox style="padding-top: 10px; position: relative" class="target-node-item">
                                <span class="black-circle"></span>
                                <span class="small-title"> 甲方本地部署 </span>
                            </flexbox>
                            <flexbox style="padding-top: 10px;" direction="column" class="small-title">
                                <span style="padding-bottom: 10px;" class="target-node-item">
                                    由甲方提供所需要的服务器、存储、服务器运维、数据安全和数据备份服务；甲方对本账号下的数据具有完全的数据源控制权限。
                                </span>
                                <span style="padding-bottom: 10px;" class="target-node-item">
                                    乙方不会主动进行版本升级，以确保甲方使用界面和功能的连续性和一致性；除非甲方向乙方采购新的产品，或者向乙方提出产品二次开发需求。
                                </span>
                                <span style="padding-bottom: 10px;width: 100%" class="target-node-item">
                                    乙方按年收取运维年费，为甲方持续提供软件产品的运行维护服务。
                                </span>
                            </flexbox>
                        </flexbox>
                        <flexbox style="padding-bottom: 10px; position: relative" class="target-node-item">
                            <span class="serial-number">4.2.2.</span>
                            <span class="small-mini-title">
                                软件部署完成后，乙方为甲方管理员和关键用户提供相应的软件使用培训和系统日常维护培训，
                                培训时间为【{{contractInfo.contractInfo | filterData('check','softwareTrainingCycle')}}】个工作日。
                            </span>
                        </flexbox>
                        <flexbox style="padding-bottom: 10px; position: relative" class="target-node-item">
                            <span class="serial-number">4.2.3.</span>
                            <span class="small-mini-title">
                                除非双方另行书面约定，乙方仅对本方的软件产品提供支持服务，不负责对其他第三方软件进行升级和提供服务。
                                如果甲方需要乙方提供该等服务，应与乙方另行协商并签署相应的有偿服务合同。
                            </span>
                        </flexbox>
                        <flexbox style="padding-bottom: 10px; position: relative" class="target-node-item">
                            <span class="serial-number">4.2.4.</span>
                            <span class="small-mini-title">
                                在保证合同约定服务内容要求得到满足，并且所有的工作是以专业的和符合技术要求的方式进行的前提下，乙方对其专业服务人员按照本合同的约定提供服务的方式和方法拥有最终的决定权。
                                由于超出乙方预见能力或控制能力的突发事件或意外事件引起的中断情况，乙方应在情况发生后的合理时间内与甲方沟通，协商解决，并相互配合尽快恢复正常运行。
                            </span>
                        </flexbox>
                        <flexbox style="padding-bottom: 10px; position: relative" class="target-node-item">
                            <span class="serial-number">4.2.5.</span>
                            <span class="small-mini-title">
                                乙方应根据合同约定服务内容要求安排相应的合格专业人员。
                                在提供服务过程中，乙方保证其参加本项目的人员的相对稳定，但因人员能力不够、离职等原因而导致的必要的人员调整不受此保证的限制。
                            </span>
                        </flexbox>
                        <flexbox style="padding-bottom: 10px; position: relative" class="target-node-item">
                            <span class="serial-number">4.2.6.</span>
                            <span class="small-mini-title">
                                甲方应为产品实施交付提供必要的条件与准备，包括但不限于工作场所和办公资源，并配合乙方完成相关工作。
                            </span>
                        </flexbox>
                        <flexbox style="padding-bottom: 10px; position: relative" class="target-node-item">
                            <span class="serial-number">4.2.7.</span>
                            <span class="small-mini-title">
                                甲方应及时向乙方免费提供本合同产品实施所必要的数据、文档及其他信息资源；甲方对提供材料及信息的准确性、完整性和统一性负责。
                            </span>
                        </flexbox>
                        <flexbox style="padding-bottom: 10px; position: relative" class="target-node-item">
                            <span class="serial-number">4.2.8.</span>
                            <span class="small-mini-title">
                                甲方应指派相应人员成立项目组，并指派专门的人员负责执行本合同下甲方的工作。
                                在实施过程中，甲方应保证其项目组成员，尤其是关键用户的相对稳定。如果因甲方人员变动导致实施延期，乙方对此不承担相应责任。
                            </span>
                        </flexbox>
                        <flexbox style="position: relative" class="target-node-item">
                            <span class="serial-number">4.2.9.</span>
                            <span class="small-mini-title">
                                乙方完成实施后，由甲乙双方依据双方约定的功能要求或技术协议进行验收，技术协议应作为本合同附件。
                            </span>
                        </flexbox>
                    </flexbox>
                </flexbox>
            </flexbox>
        </div>

        <div >
            <flexbox direction="column" style="padding-top: 20px">
                <flexbox style="padding: 10px 0;font-weight: 600" class="target-node-item">
                    <div style="position: relative">
                        <span class="serial-number">5.</span><span class="small-title">质量保证、保修服务及服务期限</span>
                    </div>
                </flexbox>
                <flexbox direction="column" style="padding-top: 10px;">
                    <flexbox style="padding-bottom: 10px; position: relative" class="target-node-item">
                        <span class="serial-number">5.1.</span><span class="mini-title">硬件</span>
                    </flexbox>
                    <flexbox direction="column" style="padding-top: 10px">
                        <flexbox style="padding-bottom: 10px; position: relative" class="target-node-item">
                            <span class="serial-number">5.1.1.</span>
                            <span class="small-mini-title">
                                乙方保证交付的硬件产品为原厂出品，满足原厂出厂标准。
                            </span>
                        </flexbox>
                        <flexbox style="padding-bottom: 10px; position: relative" class="target-node-item">
                            <span class="serial-number">5.1.2.</span>
                            <span class="small-mini-title">
                                保修期【{{contractInfo.contractInfo | filterData('check','warrantyPeriod')}}】个月，自产品发货之日起，开始计算保修期。
                            </span>
                        </flexbox>
                        <flexbox style="padding-bottom: 10px; position: relative" class="target-node-item">
                            <span class="serial-number">5.1.3.</span>
                            <span class="small-mini-title">
                                乙方自制硬件
                            </span>
                        </flexbox>
                        <flexbox style="padding: 0 0 0px 60px; " direction="column" >
                            <flexbox style="padding-top: 10px; position: relative" class="target-node-item">
                                <span class="black-circle"></span>
                                <span class="small-title"> 
                                    在保修期内，出现因乙方原因导致的故障时，乙方提供【{{contractInfo.contractInfo | filterData('check','warrantyMethod')}}】硬件维修，以缩短故障恢复时间。 
                                </span>
                            </flexbox>
                            <flexbox style="padding: 10px 0; position: relative" class="target-node-item">
                                <span class="black-circle"></span>
                                <span class="small-title"> 
                                    对乙方自制的硬件产品，在保修期外，或出现非因乙方原因导致的故障时，乙方提供收费的技术服务支持，具体收费标准另行约定。
                                </span>
                            </flexbox>
                        </flexbox>
                        <flexbox style="padding-bottom: 10px; position: relative" class="target-node-item">
                            <span class="serial-number">5.1.4.</span>
                            <span class="small-mini-title">
                                乙方外购硬件，遵循原厂的保修规则。
                            </span>
                        </flexbox>
                    </flexbox>
                </flexbox>
                <flexbox direction="column" style="padding-top: 10px;">
                    <flexbox style="padding-bottom: 10px; position: relative" class="target-node-item">
                        <span class="serial-number">5.2.</span><span class="mini-title">软件与服务</span>
                    </flexbox>
                    <flexbox direction="column">
                        <flexbox style="padding-bottom: 10px; position: relative" class="target-node-item">
                            <span class="serial-number">5.2.1.</span>
                            <span class="small-mini-title">
                                服务期限为【{{contractInfo.contractInfo | filterData('check','serviceTerm')}}】个月，自验收合格之日开始计算服务期。
                            </span>
                        </flexbox>
                        <flexbox style="padding-bottom: 10px; position: relative" class="target-node-item">
                            <span class="serial-number">5.2.2.</span>
                            <span class="small-mini-title">
                                当出现诸如系统崩溃、数据丢失等重大事故时，乙方如果未能在12小时内解决问题，应在16小时内提供应急方案，确保甲方的业务活动得以继续进行。
                                在故障解决后24小时内，乙方向甲方提交书面的故障处理报告，说明故障种类、故障原因、解决方法及故障损失等情况。
                            </span>
                        </flexbox>
                        <flexbox style="padding-bottom: 10px; position: relative" class="target-node-item">
                            <span class="serial-number">5.2.3.</span>
                            <span class="small-mini-title">
                                乙方的服务承诺：
                            </span>
                        </flexbox>
                        <flexbox direction="column" >
                            <flexbox style="padding-bottom: 10px; position: relative" class="target-node-item">
                                <span class="small-mini-title"> 
                                    售后响应时间：<span style="font-weight: bold">7*24H</span>
                                </span>
                            </flexbox>
                            <flexbox style="padding-bottom: 10px; position: relative" class="target-node-item">
                                <span class="small-mini-title"> 
                                    售后服务电话：<span style="font-weight: bold">4006-021-808</span>
                                </span>
                            </flexbox>
                            <flexbox style="padding-bottom: 10px; position: relative" class="target-node-item">
                                <span class="small-mini-title"> 
                                    保修期内，如必需乙方去甲方现场解决问题的，乙方在接到报修后【{{contractInfo.contractInfo | filterData('check','onSiteResponseCycle')}}H】内到达现场
                                </span>
                            </flexbox>
                        </flexbox>
                        <flexbox style="padding-bottom: 10px; position: relative" class="target-node-item">
                            <span class="serial-number">5.2.4.</span>
                            <span class="small-mini-title">
                                乙方外购硬件，遵循原厂的保修规则。
                            </span>
                        </flexbox>
                    </flexbox>
                </flexbox>
            </flexbox>
        </div>
        <div >
            <flexbox direction="column" style="padding-top: 20px">
                <flexbox style="padding: 10px 0;font-weight: 600" class="target-node-item">
                    <div style="position: relative">
                        <span class="serial-number">6.</span><span class="small-title">信息保密</span>
                    </div>
                </flexbox>
                
                <flexbox direction="column">
                    <flexbox style="padding-bottom: 10px; position: relative" class="target-node-item">
                        <span class="serial-number">6.1.</span><span class="mini-title">
                            在合同交付及服务期间，乙方有可能获得甲方公司相关的组织架构、人员信息、客户信息、产品信息、技术秘密及设备信息等，乙方承担相应的保密义务，
                            未经甲方同意，乙方不向第三方直接或间接透露。
                        </span>
                    </flexbox>
                </flexbox>
                <flexbox direction="column">
                    <flexbox style="padding-bottom: 10px; position: relative" class="target-node-item">
                        <span class="serial-number">6.2.</span><span class="mini-title">
                            且乙方的保密义务不因合同变更、终止而终止，如双方没有对保密期加以约定，则直至商业秘密在本行业中成为公知信息后，乙方的保密义务才得以解除。
                        </span>
                    </flexbox>
                </flexbox>
            </flexbox>
        </div>

        <div >
            <flexbox direction="column" style="padding-top: 20px">
                <flexbox style="padding: 10px 0;font-weight: 600" class="target-node-item">
                    <div style="position: relative">
                        <span class="serial-number">7.</span><span class="small-title">知识产权及许可限制</span>
                    </div>
                </flexbox>
                
                <flexbox direction="column">
                    <flexbox style="padding-bottom: 10px; position: relative" class="target-node-item">
                        <span class="serial-number">7.1.</span><span class="mini-title">
                            甲方承诺许可软件及与许可软件有关的源代码、目标代码、文档资料以及任何由乙方根据维护与技术支持提供的软件、资料的著作权均归乙方所有。
                            除本合同的约定以外，乙方未向甲方授予与许可软件著作权、专利权、商标专用权、商业秘密及其他权利有关的任何权利。
                        </span>
                    </flexbox>
                </flexbox>
                <flexbox direction="column">
                    <flexbox style="padding-bottom: 10px; position: relative" class="target-node-item">
                        <span class="serial-number">7.2.</span><span class="mini-title">
                            乙方同意授予甲方对本合同约定的许可软件的非专有的、不可转让的使用许可，甲方应在本企业主体范围内使用许可软件。
                            甲方不得将许可软件向第三方提供、销售、出租、出借、转让或提供分许可、转许可、通过信息网络传播或以其他形式供他人使用。
                            甲方不得对许可软件进行全部或部分地翻译、分解、反向编译、反汇编、反向工程或进行其他试图从许可软件导出程序源代码的行为，
                            或在许可软件的基础上书写或开发衍生软件、衍生产品或其他软件。甲方不得限制、破坏或绕过许可软件附带的加密附件或乙方提供的其他确保许可软件正确使用的限制性措施。
                            甲方不得将许可软件用于除甲方内部使用以外的其他目的，包括但不限于向第三方提供数据处理服务、应用服务、商业共享或其他软件共享安排。
                            甲方不得除掉、掩盖或更改许可软件上有关许可软件著作权或商标的标志。
                        </span>
                    </flexbox>
                </flexbox>
                <flexbox direction="column">
                    <flexbox style="padding-bottom: 10px; position: relative" class="target-node-item">
                        <span class="serial-number">7.3.</span><span class="mini-title">
                            第三方软件。乙方依据甲方的要求或双方的约定，向甲方提供语祯现有产品之外的第三方产品的使用许可、技术指标及相关服务的，
                            甲方应以第三方在其软件产品包装中明示的针对最终用户的许可使用协议和用户手册为准，或者与第三方单独签定相关使用协议。
                            乙方不对甲方使用该第三方软件而导致的任何后果承担任何责任，除非乙方对该第三方软件产品向甲做出明确书面承诺或约定。
                        </span>
                    </flexbox>
                </flexbox>
            </flexbox>
        </div>

        <div >
            <flexbox direction="column" style="padding-top: 20px">
                <flexbox style="padding: 10px 0;font-weight: 600" class="target-node-item">
                    <div style="position: relative">
                        <span class="serial-number">8.</span><span class="small-title">违约责任</span>
                    </div>
                </flexbox>
                
                <flexbox direction="column">
                    <flexbox style="padding-bottom: 10px; position: relative" class="target-node-item">
                        <span class="serial-number">8.1.</span><span class="mini-title">
                            一方违反本合同的规定，给另一方造成损失的，应当赔偿另一方的损失，赔偿金额以另一方履行本合同所能获得的最大直接经济利益为限，但是因侵权或者泄露商业秘密的情形除外。
                        </span>
                    </flexbox>
                </flexbox>
                <flexbox direction="column">
                    <flexbox style="padding-bottom: 10px; position: relative" class="target-node-item">
                        <span class="serial-number">8.2.</span><span class="mini-title">
                            在相关法律所允许的最大范围内，任何一方均不就另一方附带、间接的、偶然的损失承担责任，除非另一方在签订本合同时书面同意就其履行本合同所获得的间接经济利益与对方合理分配。
                        </span>
                    </flexbox>
                </flexbox>
            </flexbox>
        </div>

        <div >
            <flexbox direction="column" style="padding-top: 20px">
                <flexbox style="padding: 10px 0;font-weight: 600" class="target-node-item">
                    <div style="position: relative">
                        <span class="serial-number">9.</span><span class="small-title">不可抗力与争议解决</span>
                    </div>
                </flexbox>
                
                <flexbox direction="column">
                    <flexbox style="padding-bottom: 10px; position: relative" class="target-node-item">
                        <span class="serial-number">9.1.</span><span class="mini-title">
                            由于不可抗力原因致使合同无法正常履行时，无法履行合同义务的一方应以合理方式立即将不能履行合同的事实通知另一方，
                            并在不可抗力事件发生后15天内用特快专递向对方发出事件发生地点有关政府部门、公证机关或商会出具的证明，
                            以证实不可抗力的存在；如因一方怠于通知而造成另一方损失或损失扩大的，则怠于通知的一方应负责赔偿另一方的相应损失。
                        </span>
                    </flexbox>
                </flexbox>
                <flexbox direction="column">
                    <flexbox style="padding-bottom: 10px; position: relative" class="target-node-item">
                        <span class="serial-number">9.2.</span><span class="mini-title">
                            双方当事人在履约过程中应遵守诚信原则，如果产生争议，则应先进行友好协商，如果不能达成一致意见，则双方当事人皆可诉请合同签订所在地法院。
                        </span>
                    </flexbox>
                </flexbox>
            </flexbox>
        </div>

        <div >
            <flexbox direction="column" style="padding-top: 20px">
                <flexbox style="padding: 10px 0;font-weight: 600" class="target-node-item">
                    <div style="position: relative">
                        <span class="serial-number">10.</span><span class="small-title">一般条款</span>
                    </div>
                </flexbox>
                
                <flexbox direction="column">
                    <flexbox style="padding-bottom: 10px; position: relative" class="target-node-item">
                        <span class="serial-number">10.1.</span><span class="mini-title">
                            本合同一式【{{contractInfo.contractInfo | filterData('check','numberContracts')}}】份，
                            双方各执【{{contractInfo.contractInfo | filterData('check','numberCopies')}}】份，合同所有附件与合同具有同样法律效力，自双方签字盖章之日起生效。
                        </span>
                    </flexbox>
                </flexbox>
                <flexbox direction="column">
                    <flexbox style="padding-bottom: 10px; position: relative" class="target-node-item">
                        <span class="serial-number">10.2.</span><span class="mini-title">
                            合同如有未尽事宜，可另行起草书面文本形式的附件；文件生效后与本合同具有同样法律效力。
                        </span>
                    </flexbox>
                </flexbox>
            </flexbox>
        </div>

        <div :class="{'change-page': productList.length}">
            <flexbox direction="column" style="padding-bottom: 20px" class="target-node-item">
                <flexbox direction="column" style="padding-top: 20px" >
                    <flexbox style="padding: 10px 0;">
                        <div style="position: relative">
                            <span class="mini-title">对于以上所述各项内容，甲乙双方表示完全同意，签字并盖章如下：</span>
                        </div>
                    </flexbox>
                </flexbox>
                <flexbox direction="row">
                    <flexbox class="item-box" direction="column">
                        <flexbox style="padding-bottom: 20px">
                            <label style="min-width: 60px">甲方：</label><span>{{contractInfo.contractInfo | filterData('check','partACompanyName')}}</span>
                        </flexbox>
                        <flexbox style="padding-bottom: 20px">
                            <label style="min-width: 140px">授权代表签字：</label><span></span>
                        </flexbox>
                        <flexbox style="padding-bottom: 20px">
                            <label style="min-width: 60px">日期：</label>
                            <span style="margin-left: 60px;width: 20px">年</span>
                            <span style="margin-left: 60px;width: 20px">月</span>
                            <span style="margin-left: 60px;width: 20px">日</span>
                        </flexbox>
                    </flexbox>
                    <flexbox class="item-box" direction="column">
                        <flexbox style="padding-bottom: 20px">
                            <label style="min-width: 60px">乙方：</label><span>{{contractInfo.contractInfo | filterData('check','partBCompanyName')}}</span>
                        </flexbox>
                        <flexbox style="padding-bottom: 20px">
                            <label style="min-width: 140px">授权代表签字：</label><span></span>
                        </flexbox>
                        <flexbox style="padding-bottom: 20px">
                            <label style="min-width: 60px">日期：</label>
                            <span style="margin-left: 60px;width: 20px">年</span>
                            <span style="margin-left: 60px;width: 20px">月</span>
                            <span style="margin-left: 60px;width: 20px">日</span>
                        </flexbox>
                    </flexbox>
                </flexbox>
                
            </flexbox>
        </div>

        <div v-if="productList.length">
            <flexbox direction="column" style="padding: 20px 0">
                <flexbox style="padding: 10px 0;" class="target-node-item">
                    <div style="position: relative">
                        <span style="font-weight: 600">附件1：乙方供货清单</span>
                    </div>
                </flexbox>
                <flexbox direction="column" style="align-content: flex-start" >
                    <flexbox class="target-node-item">
                        <table border="1" width="100%" class="table-info">
                            <thead>
                                <th width="50">序号</th>
                                <th >名称</th>
                                <th >型号</th>
                                <th >单价</th>
                                <th >单位</th>
                                <th width="80">数量</th>
                                <th >总价</th>
                            </thead>
                            <tbody>
                                <tr v-for="(product,index) in productList" :key="index">
                                    <td>{{index + 1}}</td>
                                    <td style="text-align: left">{{product.productName}}</td>
                                    <td style="text-align: left">{{product.productModel}}</td>
                                    <td style="text-align: right">{{product.productPrice}}</td>
                                    <td style="text-align: left">{{product.unit}}</td>
                                    <td >{{product.productNumber}}</td>
                                    <td style="text-align: right">{{product.totalPrice}} 元</td>
                                </tr>
                                <tr style="text-align: left;">
                                    <td colspan="7">金额合计：{{contractInfo.entity | filterData('check','money')}} 元</td>
                                </tr>
                                <tr style="text-align: left;">
                                    <td colspan="7">金额大写：人民币  {{contractInfo.entity | filterData('capitalAmount','money')}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </flexbox>
                    <flexbox justify="flex-start" align="flex-start" style="margin-top: 20px" class="target-node-item">
                        <label style="min-width: 80px;width: 50px">说明：</label>
                        <pre style="line-height: 1.5;font-family: 'MicrosoftYaHei', 'Avenir', Helvetica, Arial, sans-serif;"  v-html="quotationInfo.remark"></pre>
                    </flexbox>
                </flexbox>
            </flexbox>
        </div>
    </div>
    <el-backtop target=".warp">
        <div
            style="{
                height: 100%;
                width: 100%;
                background-color: #f2f5f6;
                box-shadow: 0 0 6px rgba(0,0,0, .12);
                text-align: center;
                line-height: 40px;
                color: #1989fa;
            }"
            >
            UP
        </div>
    </el-backtop>
  </div>
</template>

<script>
import {
  mapGetters
} from 'vuex'
import {
  capitalAmount,
  downloadFile
} from '@/utils'
import {
  toolOptions
} from '@/utils/options'
import {
  queryBranchOfficeInfo
} from '@/api/systemManagement/SystemCustomer'
import { 
  crmQueryMaterialList,crmQuotationRead
} from '@/api/customermanagement/quotation'
export default {
    props: {
        contractInfo: {
            type: Object,
            default: () => {
                return {}
            }
        },
        action: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    filters: {
        /** 过滤字段 */
        filterData(data,type,fieldName) {
            if(type == 'orderDate'){
                if(data && data[fieldName]){
                    let time = data[fieldName].split('-');
                    return time[0] + ' 年 ' + time[1] + ' 月 ' + time[2] + ' 日 '; 
                }else{
                    return '   年 ' + '   月 ' + '   日 ';
                }
            }
            if(type == 'check'){
                return data && data[fieldName] ? data[fieldName] : '  '
            }
            if(type == 'capitalAmount'){
                if(data && data[fieldName]){
                    return capitalAmount(data[fieldName])
                }else{
                    return '零元'
                }
            }
            if(type == 'option'){
                if(fieldName == 'invoiceCycle'){
                   let item = toolOptions.invoiceCycleOption.find(item => { return item.value == data[fieldName]});
                    if(data && data[fieldName]){
                        return item.name
                    }else{
                        return '  '
                    }
                }
            }
        }
    },
    watch: {
        contractInfo: {
            handler(val){
                // 触发分公司信息
                // this.getBranchOfficeInfo()
                this.getQuotationMaterialList(val.entity.quotationId)
            },
            deep: true
        }
    },
    data() {
        return {
            companyInfo: {},
            quotationInfo: {},
            productList: []
        }
    },
    computed: {
        ...mapGetters(['crm','psi']),
    },
    mounted(){

    },

    methods: {
      
        // 获取报价中的物料清单
        getQuotationMaterialList(quotationId){
            let param = {
                quotationId: quotationId
            }
            crmQuotationRead(param).then(res => {
                let arr = [];
                this.quotationInfo = res.data.baseInfo;
                if(res.data.listData && res.data.listData.length){
                    res.data.listData.forEach(item => {
                        arr = arr.concat(item.productList)
                    })
                }
                this.productList = arr;
            })
        },

        // 下载文件
        downContractFile(file){
            if(file.files.length){
                let item = file.files[0];
                downloadFile({ path: item.filePath, name: item.name })
            }
            console.log(file)
        }
    }


}
</script>

<style lang="scss" scoped>
.warp{
    width: 100%;
    min-width: 840px;
    height: 100%;
    overflow: auto;
    display: flex;
    justify-content: center;
    position: relative;
}

.warning-show{
    background-color: orange;
}



.contract-info{
    min-width: 840px;
    width: 840px;
    // padding: 20px;
    height: 100%;
    min-height: 1086px;
    box-sizing: border-box;
    border-collapse: collapse;
    position: relative;
    font-size: 18px;
    label{
        min-width: 120px;
    }
    p{
        text-indent: 36px;
        line-height: 1.5;
    }
    // span{
    //     width: 100%
    // }
    .small-title{
        padding-left: 36px;
        line-height: 1.5;
        justify-content: flex-start;
    }
    .mini-title{
        padding-left: 48px;
        line-height: 1.5;
    }
    .small-mini-title{
        padding-left: 60px;
        line-height: 1.5;
    }
    .table-info{
        width: 100%;
        border-collapse: collapse;
        border-spacing: 0;
        text-align: center;
        tr {
            width: 100%;
        }
        th {
            border: 1px solid;
            font-size: 14px;
            line-height: 1.2;
            padding: 8px;
            font-weight: 600;
        }
        td {
            border: 1px solid;
            padding: 5px;
            line-height: 1.2;
        }
    }
    
    .item-box{
        padding-top: 10px;
        // align-items: flex-start;
        span{
            line-height: 1.5;
        }
    }

    .serial-number{
        position: absolute;
        left: 0;
        top: 4px
    }

    .black-circle{
        position: absolute;
        left: 0;
        top: 18px;
        width: 10px;
        height: 10px;
        background-color: #000;
        border-radius: 50%;
    }
    
    .download-button{
        margin-left: 10px;
        width: 50px;
        color: #3E84E9;
        cursor: pointer;
        &:hover{
            border-bottom: 1px solid
        }
    }
}

</style>